<template>
  <div>
    <div class="mb24" style="display: flex; align-items: center; justify-content: space-between">
      <a-space>
        <a-input v-model="followUser" allowClear placeholder="跟进人" style="width: 200px" @change="onSelectChange" />
        <a-select
          v-model="followType"
          :options="followTypeList"
          allowClear
          placeholder="跟进方式"
          style="width: 200px"
          @change="onSelectChange"
        />
      </a-space>
      <a-button type="primary" @click="addItem">添加</a-button>
    </div>
    <a-table :dataSource="dataSource" :columns="followColumns" :pagination="pagination" rowKey="id" @change="handleTableChange">
      <template slot="action" slot-scope="text, record">
        <a-space>
          <a-button type="link" size="small" @click="editItem(record)">编辑</a-button>
          <a-button type="link" size="small" @click="delItem(record.id)">删除</a-button>
        </a-space>
      </template>
    </a-table>
    <a-modal v-model="addVisible" title="添加跟进记录" @ok="onAddOk">
      <a-form-item required label="跟进人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select
          v-model="recordCur"
          :options="adminUsers"
          showSearch
          :filterOption="filterOption"
          placeholder="请选择跟进人"
          style="width: 100%"
        ></a-select>
      </a-form-item>
      <a-form-item required label="跟进方式" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select v-model="recordMed" :options="followTypeList" placeholder="请选择跟进方式" style="width: 100%"></a-select>
      </a-form-item>
      <a-form-item required label="跟进内容" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-textarea v-model="recordCon" placeholder="请填写跟进内容" style="width: 100%"></a-textarea>
      </a-form-item>
    </a-modal>
    <a-modal v-model="editVisible" title="编辑跟进记录" @ok="editOk">
      <a-form-item required label="跟进人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select
          v-model="recordCur"
          :options="adminUsersFormatted"
          showSearch
          :filterOption="filterOption"
          placeholder="请选择跟进人"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item required label="跟进方式" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select v-model="recordMed" :options="followTypeList" placeholder="请选择跟进方式" style="width: 100%"></a-select>
      </a-form-item>
      <a-form-item required label="跟进内容" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-textarea v-model="recordCon" placeholder="请填写跟进内容" style="width: 100%"></a-textarea>
      </a-form-item>
    </a-modal>
  </div>
</template>
<script>
import { followColumns, followTypeList } from "../../funcs";
import { followUpLoadReq, followUDelReq, followUpUpdateReq, followUpAddReq } from "../../api";
import { mapState } from "vuex";
import { fillDelItemToList } from "@/utils/tools";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      adminUsersFormatted: [],
      addVisible: false,
      editVisible: false,
      recordId: null,
      recordCur: undefined,
      recordMed: undefined,
      recordCon: "",
      followUser: undefined,
      followType: undefined,
      followTypeList,
      followColumns,
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "small",
        current: 1,
        showTotal: (total) => `共 ${total} 条`
      }
    };
  },
  computed: {
    ...mapState(["recruitment"]),
    adminUsers() {
      return this.recruitment.adminUsers;
    },
    followUserMap() {
      const map = {};
      this.adminUsers.forEach((item) => {
        map[item.value] = item.label;
      });
      return map;
    },
    talentPoolId() {
      return this.$route.query.talentPoolId;
    }
  },
  watch: {
    adminUsers: {
      handler(newVal) {
        this.adminUsersFormatted = newVal;
      },
      immediate: true
    }
  },
  created() {
    this.loadData();
  },
  mounted() {},
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    addItem() {
      this.recordCur = undefined;
      this.recordMed = undefined;
      this.recordCon = "";
      this.addVisible = true;
    },
    editItem(record) {
      this.adminUsersFormatted = fillDelItemToList(
        {
          label: record.followUserName,
          value: record.followUser,
          disabled: true
        },
        this.adminUsers
      );
      this.recordCur = record.followUser;
      this.recordMed = record.followType;
      this.recordCon = record.followContent;
      this.recordId = record.id;
      this.editVisible = true;
    },
    onAddOk() {
      if (this.recordCur && this.recordMed && this.recordCon) {
        followUpAddReq({
          talentPoolId: this.talentPoolId,
          followUser: this.recordCur,
          followType: this.recordMed,
          followContent: this.recordCon
        })
          .then((res) => {
            this.$message.success("添加成功");
            this.addVisible = false;
            this.loadData();
          })
          .catch((err) => {
            console.log("followUpAddReq", err);
          });
      } else {
        this.$message.error("请填写完整信息");
      }
    },
    editOk() {
      if (this.recordCur && this.recordMed && this.recordCon) {
        followUpUpdateReq({
          talentPoolId: this.talentPoolId,
          followUser: this.recordCur,
          followType: this.recordMed,
          followContent: this.recordCon,
          id: this.recordId
        })
          .then((res) => {
            this.$message.success("编辑成功");
            this.editVisible = false;
            this.loadData();
          })
          .catch((err) => {
            console.log("followUpUpdateReq", err);
          });
      } else {
        this.$message.error("请填写完整信息");
      }
    },
    delItem(id) {
      this.$confirm({
        title: "确认删除该跟进记录吗？",
        content: (h) => <div style="color: red;">删除后将无法恢复</div>,
        okType: "danger",
        onOk: () => {
          followUDelReq(id)
            .then((res) => {
              this.$message.success("删除成功");
              this.loadData();
            })
            .catch((err) => {
              console.log("delItem followUp", err);
            });
        }
      });
    },
    onSelectChange() {
      this.pagination.current = 1;
      this.loadData();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.loadData();
    },
    loadData() {
      const params = {
        talentPoolId: this.talentPoolId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        "orders[0].property": "gmtCreate",
        "orders[0].desc": true
      };
      if (this.followUser) {
        params.followUserName = this.followUser;
      }
      if (this.followType) {
        params.followType = this.followType;
      }
      followUpLoadReq(params).then((res) => {
        this.dataSource = res.data.entities;
        this.pagination.total = res.data.entityCount;
      });
    }
  }
};
</script>
<style lang="scss"></style>
